<template>
    <a-upload :headers="{'token': token}" :action="baseUrl + '/upload/file'" :fileList="file ? [file] : []"
      :show-file-list="false" show-remove-button
   @change="onChange">
      <template #upload-button>
        <div :class="`arco-upload-list-item${
          file && file.status === 'error' ? ' arco-upload-list-item-error' : ''
        }`">
          <div class="arco-upload-list-picture custom-upload-avatar" v-if="(file && file.url)|| props.file.url">
            <img :src="file.url ? file.url : props.file.url" />
            <div class="arco-upload-list-picture-mask">
              <IconEdit />
            </div>
            <a-progress v-if="file.status === 'uploading' && file.percent < 100" :percent="file.percent" type="circle"
              size="mini" :style="{
                position: 'absolute',
                left: '50%',
                top: '50%',
                transform: 'translateX(-50%) translateY(-50%)',
              }" />
          </div>
          <div class="arco-upload-picture-card" v-else>
            <div class="arco-upload-picture-card-text">
              <IconPlus />
              <div style="margin-top: 10px; font-weight: 600">{{props.title}}</div>
            </div>
          </div>
        </div>
      </template>
    </a-upload>
  </template>
  <script lang="ts" setup>
  import { reactive, ref } from 'vue';
  const baseUrl = import.meta.env.VITE_API_BASE_URL;
  const token = "getToken()";
  const emits = defineEmits();
  const props = defineProps({
    title: {type: String, default: '上传图片'},
    file: {type: Object, default: ''},
  });
  const file = ref();
  file.value = props.file;
  console.log(file.value)
  const onChange = (_, currentFile) => {
    file.value = {
      ...currentFile,
    };
    if (currentFile?.response?.data[0].url) {
      const url = currentFile?.response?.data[0].url;
      emits('onSuccess', url)
    }
  };
  </script>